<template>
    <view class="page">
           <view class="set-lang" @click="showLang">{{lang}}<text class="iconfont">&#xe600;</text></view>
		   <u-popup v-model="show" mode="bottom" border-radius="10">
		   		<view class="lang-list" v-for="(item,index) in langList" :key="index" @click="setLang(item)">{{item.name}}</view>
		   </u-popup>
	</view>
</template>

<script>
	import {defaultLanguage} from '@/config.js'
	export default {
		data() {
			return {
				show:false,
                lang: '',
				langList:[
					{name:'中文简体',val:'zh-cn'},
					{name:'English',val:'en-us'}
				]
				
			}
		},
		created() {
            this.onlang()
		},
		methods: {
				showLang(){
					this.show = true;
				},
				onlang(){
					let defaultlang = uni.getStorageSync('lang') || defaultLanguage;
					for(let item of this.langList){
						if(item.val == defaultlang){
							this.lang = item.name
						}
					}
				},
				setLang(e){
					this.show = false;
					if(e.name == this.lang){
						return 
					}
					this.lang = e.name
					uni.setStorageSync('lang',e.val);
					this.$i18n.locale = uni.getStorageSync('lang');
				}
		}
	}
</script>

<style lang="less" scoped>
	.set-lang{
		position: absolute;
		right: 20upx;
		top: calc(30upx + var(--status-bar-height));
		color: var(--theme-color);
		font-size: 28upx;
		display: flex;
		align-items: center;
		.iconfont{
			font-size: 24upx;
		}
	}
	.lang-list{
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--theme-color);
		font-size: 36upx;
		padding: 30upx 0;
		border-top:1upx solid var(--border2);
		&:nth-child(1){
			border:none;
		}
	}
</style>
